<template>
	<el-dialog v-model="dialog" :title="state.form.id ? '修改支付配置' : '添加支付配置'" width="60%" :before-close="handleClose">
		<el-form ref="formRef" :model="state.form" label-width="200" :rules="state.rules">
			<el-form-item label="支付类型" prop="type">
				<el-radio-group v-model="state.form.type">
					<el-radio label="1">微信</el-radio>
					<el-radio label="2">支付宝</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-row>
				<el-col :span="12" class="mb20">
					<el-form-item label="商户号" prop="mchId">
						<el-input v-model="state.form.mchId" maxlength="20" show-word-limit></el-input>
					</el-form-item>
					<el-form-item label="apiV3秘钥" v-if="state.form.type == '1'" prop="apiv3Key">
						<el-input v-model="state.form.apiv3Key" show-word-limit></el-input>
					</el-form-item>
					<el-form-item label="微信移动应用的APPID" prop="subAppId">
						<el-input v-model="state.form.subAppId" maxlength="50" show-word-limit></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12" class="mb20">
					<el-form-item label="应用ID" prop="appId">
						<el-input v-model="state.form.appId" maxlength="20" show-word-limit></el-input>
					</el-form-item>
					<el-form-item label="支付商户密钥" prop="mchKey">
						<el-input v-model="state.form.mchKey" show-word-limit></el-input>
					</el-form-item>
					<el-form-item label="证书序列号" v-if="state.form.type == '1'" prop="certSerialNo">
						<el-input v-model="state.form.certSerialNo" maxlength="50" show-word-limit></el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row class="mt20">
				<el-col :span="24">
					<el-form-item :label="state.form.type == '1' ? 'apiclient_cert.p12文件的绝对路径' : 'alipayRootCert.crt'" prop="keyPath">
						<CertUpload @handleSuccess="keyPathHandle" />
						<div><el-input v-model="state.form.keyPath"></el-input></div>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row class="mt20">
				<el-col :span="24">
					<el-form-item :label="state.form.type == '1' ? '商户apiclient_key.pem' : 'alipayCertPublicKey_RSA2.crt'" prop="privateKeyPath">
						<CertUpload @handleSuccess="privateKeyPathHandle" />
						<p><el-input v-model="state.form.privateKeyPath"></el-input></p>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row class="mt20">
				<el-col :span="24">
					<el-form-item :label="state.form.type == '1' ? '商户apiclient_cert.pem' : 'appCertPublicKey.crt'" prop="privateCertPath">
						<CertUpload @handleSuccess="privateCertPathHandle" />
						<p><el-input v-model="state.form.privateCertPath"></el-input></p>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="handleClose">关 闭</el-button>
				<el-button type="primary" :loading="loading" @click="submitForm(formRef)">确 认</el-button>
			</span>
		</template>
	</el-dialog>
</template>
<script lang="ts" setup>
import { defineAsyncComponent, ref, reactive } from 'vue';
import { addObj, editObj, getById } from '/@/api/pay/payconfig';
import { ElMessage, FormInstance, FormRules } from 'element-plus';
const CertUpload = defineAsyncComponent(() => import('/@/components/certUpload/index.vue'));
const emit = defineEmits(['initPage']);
const state = reactive({
	form: {
		id: undefined,
		type: '',
		mchId: '',
		apiv3Key: '',
		subAppId: '',
		appId: '',
		mchKey: '',
		certSerialNo: '',
		keyPath: '',
		privateKeyPath: '',
		privateCertPath: '',
	},
	rules: {
		type: [
			{
				required: true,
				message: '请选择支付类型',
				trigger: 'change',
			},
		],
		mchId: [
			{
				required: true,
				message: '请输入商户号',
				trigger: 'change',
			},
		],
		apiv3Key: [
			{
				required: true,
				message: '请输入apiV3秘钥',
				trigger: 'change',
			},
		],
		appId: [
			{
				required: true,
				message: '请输入应用ID',
				trigger: 'change',
			},
		],
		mchKey: [
			{
				required: true,
				message: '请输入支付商户密钥',
				trigger: 'change',
			},
		],
		certSerialNo: [
			{
				required: true,
				message: '请输入证书序列号',
				trigger: 'change',
			},
		],
	},
});
const dialog = ref(false);
const loading = ref(false);
const formRef = ref();

const initForm = (row: any | undefined) => {
	dialog.value = true;
	if (row && row.id) {
		getDetail(row.id);
	}
};
const getDetail = (id: string) => {
	loading.value = true;
	getById(id).then((response: any) => {
		state.form = response.data.data;
		loading.value = false;
	});
};
/**
 * 关闭事件
 */
const handleClose = () => {
	resetForm(formRef.value);
};
/**
 * 重置表单
 */
const resetForm = (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	state.form.id = undefined;
	loading.value = false;
	dialog.value = false;
	formEl.resetFields();
};
/**
 * 提交按钮
 */
const submitForm = async (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	await formEl.validate((valid, fields) => {
		if (valid) {
			loading.value = true;
			if (state.form.id) {
				//修改
				edit();
			} else {
				//新增
				add();
			}
		}
	});
};
/**
 * 新增
 */
const add = () => {
	addObj(state.form)
		.then((response: any) => {
			resetForm(formRef.value);
			ElMessage.success('新增成功');
			emit('initPage');
		})
		.catch(() => {
			loading.value = false;
		});
};
/**
 * 修改
 */
const edit = () => {
	editObj(state.form)
		.then((response: any) => {
			resetForm(formRef.value);
			ElMessage.success('修改成功');
			emit('initPage');
		})
		.catch(() => {
			loading.value = false;
		});
};
const keyPathHandle = (url: string) => {
	state.form.keyPath = url;
};
const privateKeyPathHandle = (url: string) => {
	state.form.privateKeyPath = url;
};
const privateCertPathHandle = (url: string) => {
	state.form.privateCertPath = url;
};
defineExpose({
	initForm,
});
</script>
